import React from 'react';
import style from './css/courseDetail.css'
export class CourseDetail extends React.Component{

    constructor(){
        super();
        this.state = {
            courseInfo:{}
        }
    }

    componentWillReceiveProps(nextProps){
        const {courseData} = nextProps;
        this.setState({
            courseInfo:courseData
        })
    }

    render(){
        return (
            <div style={{flex:1}}>
                {this._renderTitle()}
                {this._renderContent()}
            </div>

        )
    }

    _renderTitle = ()=>{
        const {header,text} = style;
        return (
            <div className={header}>
                <div style={{display:'flex',flexDirection:'row',textDecoration:'none',position:'absolute',left:0,alignSelf:'center'}}
                    onClick={()=>{
                        this.props.callback&&this.props.callback();
                    }}
                >
                    <p className={text} style={{marginLeft:'2rem'}}>{'<'}</p>
                    <p className={text} style={{marginLeft:'1rem'}}>{'返回'}</p>
                </div>
                <p className={text}>{'视频详情'}</p>
            </div>
        )
    };

    _renderContent = ()=>{
        return (
            <div style={{width:'100%',height:'100%'}}>
                {<div style={{height:'8rem'}}></div>}
                {this._renderVideo()}
                {this._renderIntroduce()}
            </div>
        )
    }

    _renderVideo = ()=>{
        const {videoUrl} = this.props.courseData;
        //const {videoUrl} = {videoUrl:'http://vod.jinday.com/u/13044/mp4/1280x720/720-2df79707cab9708a0d8121fa038b8985.mp4'}
        const {video} = style;
        console.log(videoUrl);
        return (
            <div style={{flex:1,backgroundColor:'black'}}>
                <video className={video}
                       preload="auto"
                       width="100%"
                       autoPlay={"autoplay"}
                       controls={"controls"}
                       webkit-playsinline={"true"}
                       x-webkit-airplay={"true"}
                       x5-video-player-type={"h5"}
                       x5-video-player-fullscreen={"true"}
                       loop="loop">
                    <source src={videoUrl}/>
                </video>
            </div>

        );
    };

    _renderIntroduce = ()=>{
        const {introduce,text,textOne} = style;
        const {courseName,courseType,part,author} = this.props.courseData;
        return (
            <div className={introduce}>
                <p className={text} style={{ marginLeft: '1rem',marginTop:'2rem'}}>课程介绍</p>
                <p className={textOne} style={{marginLeft:' 3rem',marginTop:'1rem'}}>{'课程名称:'+courseType+'—'+part}</p>
                <p className={textOne} style={{marginLeft:' 3rem',marginTop:'1rem'}}>{'讲课老师:'+author}</p>
                <p className={textOne} style={{marginLeft:' 3rem',marginTop:'1rem'}}>{'讲课时间:'+courseName}</p>
            </div>
        )
    };

    componentDidMount(){

    }

}
